<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历人员-->
  <button @click="updateMeiCanWork">修改马冬梅（有效方式）</button>
  <button @click="updateMeiCanNotWork">修改马冬梅（无效效方式）</button>
  <ul>
    <li v-for="(p,index) in persons" :key="p.id">
      {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
  </ul>


</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '马冬梅', age: 17, sex: '女'},
        {id: '002', name: '周冬雨', age: 15, sex: '女'},
        {id: '003', name: '周杰伦', age: 19, sex: '男'},
        {id: '004', name: '温兆伦', age: 29, sex: '男'}
      ]
    },
    methods:{
      updateMeiCanWork(){
        //可以检测数据变化
        this.persons[0].name='马老师';
        this.persons[0].age=50;
        this.persons[0].sex='男';
      },
      updateMeiCanNotWork(){
        //无法监测数据变化
        this.persons[0] = {id:'001',name:'马马老师',age:55,sex:'男'};
      }
    }
  });
</script>
</body>
</html>
